<template>
  <div class="audit-detail">
      <div class="qu-game">
          <div class="operation">
            <!-- <template v-if="detail.status === 1">
              <div>
                <el-button type="primary" @click="setAuditStatus(2)">通过</el-button>
                <el-button type="primary" @click="refused(-1)">拒绝</el-button>
              </div>
            </template> -->
            <template v-if="detail.status === 3">
              <el-button style="margin-right: 10px" type="primary" @click="refused(-2)">客服下架</el-button>
            </template>
            <template v-if="detail.status === 4 || detail.status === 5">
              <el-button style="margin-right: 10px" type="primary" @click="goOrderDetail(false)">查看买家订单</el-button>
            </template>
            <template>
              <el-button style="margin-right: 10px" type="success" @click="copyAccountNo">复制账号链接</el-button>
            </template>
            <template>
              <AddBlackName :sourceType="0" @updateList="updateList" />
            </template>
          </div>
      </div>
      <!-- 用户信息 -->
      <div class="card">
        <topTitle title="账号信息"/>
        <div class="card-content card-content-active">
          <div style="display: flex; justify-content: flex-start;">
            <div class="item">
              <p style="margin-right: 10px">QQ: {{ detail.accountNo }}</p>
              <p>估值：{{ detail.worth }}元</p>
            </div>

            <div class="item">
              <div style="display:flex; justify-content: flex-start;align-items: center;">
                <span style="margin-right: 10px">账号售价：{{ detail.price }}元</span>
                <div v-if="detail.showEditPrice" style="color:#409EFF; cursor:pointer; margin-right: 10px" @click="showPriceModal(0)">
                  <i class="el-icon-edit"></i>
                  <span>编辑价格</span>
                </div>
              </div>
              <p v-if="detail.basePrice">后台底价：{{ detail.basePrice }}元</p>
              <p v-else>后台底价：无</p>
              <div style="display:flex; justify-content: flex-start;align-items: center;">
                <!-- <span style="margin-right: 10px">保证金：{{ detail.money }}元</span> -->
                <span style="margin-right: 10px">保证金：{{ detail.moneyDesc || '无' }}</span>
                <div v-if="detail.showEditDeposit" style="color:#409EFF; cursor:pointer; margin-right: 10px" @click="showPriceModal(1)">
                  <i class="el-icon-edit"></i>
                  <span>编辑金额</span>
                </div>
              </div>
            </div>

            <div class="item">
              <div>账号状态：
                  <div style="display: inline-block;">
                    <span v-if="statusMap[detail.status]" :style="{color: statusMap[detail.status].color}">{{statusMap[detail.status].name}}</span>
                    <span>{{detail.dealServeType ? '(顾问模式)' : '(普通模式)'}}</span>
                  </div>
                  </div> 
                  <p>托管时间：{{ formatDate(detail.createTime) }}</p>
                  <div v-if="insure">投保情况：
                    <span :style="{ 'color': insure.status === 1 ? 'rgb(103, 194, 58)' : insure.status === 3 ? 'red' : '#333'}">{{ insureVoStatus[insure.status + ''] }}</span>
                    <span v-if="insure.status === 1" :style="{ 'color': insure.status === 1 ? 'rgb(103, 194, 58)' : insure.status === 3 ? 'red' : '#333'}">（有效期至{{ formatDate(insure.dueTime, 'YYYY-MM-DD') }})</span>
                  </div>
            </div>

            <!-- 交易中或者已售出展示 -->
            <div class="item" v-if="detail.status === 4 || detail.status === 5">
              <div style="margin-right: 10px"><span>交易订单：</span><span @click="goOrderDetail(false)" style="color:#409EFF; cursor:pointer;">{{ detail.orderNo }}</span></div>
              <div>下单时间：{{ detail.createOrderTime }}</div>
            </div>
          </div>

          <div class="card-line">
            <div class="account-desc">
              <div class="desc-title" style="font-weight: 800">账号描述：</div>
              <div class="desc-content">{{ detail.title || '暂无描述~' }}</div>
              <i class="el-icon-edit" style="color:#409EFF; cursor:pointer;" @click="showDescAccount"></i>
            </div>
          </div>

          <div class="card-line" style="display: flex; justify-content: flex-start;">
            <div class="item">
              <div @click="goUserInfo(detail.userId)">趣ID：<span style="color:#409EFF; cursor:pointer; margin-right: 10px">{{ detail.userId }}</span><span v-if="userIdCardVo && userIdCardVo.userAccountBlackDesc" style="color: red">  ({{ userIdCardVo.userAccountBlackDesc }})</span></div>
              <p>昵称：{{ detail.nickName }}</p>
            </div>
            <div class="item" v-if="userIdCardVo">
              <p>姓名：{{ userIdCardVo.name }}</p>
              <div><span>身份证号：{{ userIdCardVo.idcard }}</span> <span v-if="userIdCardVo.idcardAccountBlackDesc" style="color: red">  ({{ userIdCardVo.idcardAccountBlackDesc }})</span></div>
              <div><span style="margin-right: 5px">手机号：{{ userIdCardVo.phone }}</span><span class="table-btn" @click="copyPhone(userIdCardVo.phone)">复制</span></div>
            </div>
            <!-- <div class="item">
              <p v-if="userAdviseInfoVo && userAdviseInfoVo.adviseUserId" style="color: rgb(103, 194, 58)">顾问：{{ userAdviseInfoVo.adviseUserId }} ({{ userAdviseInfoVo.adviseUserName}})</p>
              <p v-else style="color: red">顾问：无</p>
            </div> -->
          </div>
        </div>
      </div>
      <!-- 账号描述 -->
      <!-- <div class="card">
        <div style="display:flex; justify-content: flex-start;align-items: center;">
          <topTitle title="账号描述"/>
          <i class="el-icon-edit" style="color:#409EFF; cursor:pointer; margin-top: -8px" @click="showDescAccount"></i>
        </div>
        <div class="card-content">
          <div class="item" v-if="detail.title">
            <p>{{ detail.title }}</p>
          </div>
          <p v-else style="width: 100%;text-align: center">暂无描述~</p>
        </div>
      </div> -->

      <!-- 处罚记录 -->
      <topTitle title="处罚记录" />
      <div style="margin-bottom: 30px" v-if="detail && detail.userId">
        <BlackNameItem ref="balckItem" :userId="detail.userId" :accountNo="detail.accountNo" @updateInfo="getDetail" />
      </div>

      <!-- 备注列表 -->
      <div class="card">
        <div class="sub-top-title">
          <topTitle title="号主的备注"/>
          <el-button type="primary" size="small" class="add-sub" @click="addSub">添加备注</el-button>
        </div>
        <div class="sub-wrap">
          <!-- <div class="sub-title">
              <span>备注</span>
          </div> -->
          <template v-if="userRemarks && userRemarks.length">
              <div class="sub-list" :style="{ 'height': allFlag ? 'auto' : '200px'}">
                  <div class="sub-row" v-for="item in userRemarks" :key="item.remarkId">
                      <div class="top">
                          <div class="name">{{ item.nickName }}</div>
                          <div class="time">{{ item.updateTime }}</div>
                          <i class="el-icon-edit" style="color: #409EFF; margin-right: 10px" @click="addSub(item)"></i>
                          <i class="el-icon-delete" style="color: #F56C6C" @click="delSub(item)"></i>
                      </div>
                      <div class="bottom">{{ item.remark }}</div>
                      <div style="color: #909399; font-size: 12px;" v-if="item.source">来源：{{ item.source }} <span class="table-btn"  @click="goOrderDetail(item)">{{ item.number }}</span></div>
                  </div>
              </div>
              <div class="sub-botton" @click="showAll"><i class="el-icon-caret-bottom"></i></div>
          </template>
          <template v-else>
            <div style="width: 100%; text-align: center; padding: 10px; font-size: 14px;border-top: solid 1px #ededed;">暂无备注~</div>
          </template>
        </div>
      </div>

      <!-- 号主信息 -->
      <!-- <div class="card">
        <topTitle title="号主信息"/>
        <div class="card-content">
          <div class="item">
            <div @click="goUserInfo(detail.userId)">趣ID：<span style="color:#409EFF; cursor:pointer; margin-right: 10px">{{ detail.userId }}</span></div>
            <p>昵称：{{ detail.nickName }}</p>
          </div>
          <div class="item" v-if="userIdCardVo">
            <p>姓名：{{ userIdCardVo.name }}</p>
            <p>身份证号：{{ userIdCardVo.idcard }}</p>
          </div>
          <div class="item">
            <p v-if="userAdviseInfoVo && userAdviseInfoVo.adviseUserId" style="color: rgb(103, 194, 58)">顾问：{{ userAdviseInfoVo.adviseUserId }} ({{ userAdviseInfoVo.adviseUserName}})</p>
            <p v-else style="color: red">顾问：无</p>
          </div>
        </div>
      </div> -->

      <!-- 道具概览 -->
      <div class="card">
        <topTitle title="道具概览"/>
        <div class="card-content">
          <div class="item" v-for="(item, index) in detail.propCount" :key="index">
            <p>{{ item.name }}：</p>
            <p style="color: #000;">{{ item.num }}</p>
          </div>
        </div>
      </div>

      <div class="content">
        <topTitle title="售卖账号预览"/>
        <div class="preview">
          <iframe width="375" height="700" :src="iframUrl"></iframe>
        </div>
      </div>
      <el-dialog
        class="dialog-box"
        title="下架理由:"
        :visible.sync="dialogVisible"
        width="500px">
        <div>
            <el-input type="textarea" maxlength="200" rows="3" show-word-limit v-model.trim="remark"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setAuditStatus(auditStatus)">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 改价信息 和 减免保证金-->
    <el-dialog :title="priceTitle" :visible.sync="editPrice" width="400px">
      <div class="price-msg">
          <span>账号售价：{{detail.price}} 元</span>
          <span style="margin-left: 10px">后台底价：{{detail.basePrice}} 元</span>
        </div>
        <div class="price-msg" style="margin-top: 20px">
            <span style="min-width: 120px">{{ priceLabel }}</span><el-input placeholder="请输入大于0的数字~" v-model="priceContent" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editPrice = false">取 消</el-button>
            <el-button type="primary" @click="confirmPrice">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 账号描述-->
    <el-dialog title="账号描述" :visible.sync="descAccount" width="400px">
        <el-input type="textarea" maxlength="200" rows="3" show-word-limit v-model.trim="descAccountContent"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="descAccount = false">取 消</el-button>
            <el-button type="primary" @click="descAccountAction">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 添加备注信息 -->
    <el-dialog :title="subTitle" :visible.sync="subFlag" width="400px">
        <div style="padding: 10px 0 20px;">
            <el-input v-model="subContent" maxlength="200" show-word-limit type="textarea"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="subFlag = false">取 消</el-button>
            <el-button type="primary" @click="subConfirm">确 定</el-button>
        </span>
    </el-dialog>
    
  </div>
</template>
<script>
let domain = 'https://dev-game.duodian.cn/'
let token = 'C3g+8B6Fb9OeXD5wf9V1EJMwiUW5/hAElF8qELnXvYk45HL5EXtoP3TNa7boQyGa'
if (location.host === 'dev-work.duodian.cn') {
  domain = 'https://dev-game.duodian.cn/'
  token = 'C3g+8B6Fb9OeXD5wf9V1EJMwiUW5/hAElF8qELnXvYk45HL5EXtoP3TNa7boQyGa'
} else if (location.host === 'work.duodian.cn') {
  domain = 'https://api-game.duodian.cn/'
  token = 'MEX0eSCOkl2bHILDstI1W1xJ7AfiKCpPhzZWj9MM0h0iBVCxIBUdigi5qpT0yClP'
} else {
  domain = 'http://localhost:1234/'
  token = 'C3g+8B6Fb9OeXD5wf9V1EJMwiUW5/hAElF8qELnXvYk45HL5EXtoP3TNa7boQyGa'
}
import { formatDate } from '@/utils/utils'
const statusMap = {
  0: {
    name: '待提交',
    color: ''
  },
  1: {
    name: '待审核',
    color: ''
  },
  2: {
    name: '待上架',
    color: ''
  },
  3: {
    name: '已上架',
    color: '#67C23A'
  },
  4: {
    name: '交易中',
    color: ''
  },
  5: {
    name: '已售出',
    color: ''
  },
  6: {
    name: '已售出',
    color: ''
  },
  '-1': {
    name: '审核拒绝',
    color: '#F56C6C'
  },
  '-2': {
    name: '客服下架',
    color: '#F56C6C'
  }
}
export default {
    components: {
    },
    data () {
        return {
            statusMap,
            dialogVisible: false,
            detail: {},
            status: 0,
            auditStatus: -1,
            dataId: '',
            remark: '',
            type: '',
            iframUrl: '',
            gameAccountVo: {},
            userIdCardVo: {
              name: ''
            },
            editPrice: false,
            priceTitle: '',
            priceLabel: '',
            priceContent: '',
            priceIndex: 1,
            descAccount: false,
            descAccountContent: '',
            subFlag: false, // 添加备注信息
            subContent: '',
            subTitle: '添加备注',
            subRemarkId: null,
            userRemarks: [],
            allFlag: true,
            userAdviseInfoVo: null, // 顾问信息
            insureVoStatus: { // 保单状态
              '0': '待生效',
              '1': '保障中',
              '2': '已失效',
              '3': '已赔付',
              '4': '已作废',
              '-1': '未投保',
            },
            insure: null // 投保信息
        }
    },
    created() {
      const { dataId, status, type } = this.$route.query
      this.dataId = dataId
      this.status = status
      this.type = type
      this.getDetail()
    },
    mounted () {
        // let host = location.host
        // if (host.includes('dev-') || host.includes('localhost')) {
        //   this.iframUrl = `https://dev-game.duodian.cn/web/quGame/trade/hero/accountDetail?dataId=${this.dataId}&from=admin&t=${encodeURIComponent('P4dQrmYbhNavUlftFYJI+HVY2im/mlEy3XKeDkLlEqUx3xlBUpZjJsIzyXY1SR9+')}`
        // } else {
        //   this.iframUrl = `https://preapi-game.duodian.cn/web/quGame/trade/hero/accountDetail?dataId=${this.dataId}&from=admin&t=${encodeURIComponent('MEX0eSCOkl2bHILDstI1W1xJ7AfiKCpPhzZWj9MM0h0iBVCxIBUdigi5qpT0yClP')}`
        // }
        // this.iframUrl = `https://preapi-game.duodian.cn/web/quGame/trade/hero/accountDetail?dataId=${this.dataId}&from=admin&t=${encodeURIComponent('MEX0eSCOkl2bHILDstI1W1xJ7AfiKCpPhzZWj9MM0h0iBVCxIBUdigi5qpT0yClP')}`
    },
    methods: {
        // 复制手机号
        copyPhone(phone) {
          const aux = document.createElement('textarea')
          aux.innerHTML = phone
          document.body.appendChild(aux)
          aux.select()
          document.execCommand('copy')
          document.body.removeChild(aux)
          this.$message.success('复制成功')
        },
        // 复制C端账号详情链接
        copyAccountNo () {
          let url = ``
          let type = this.detail.gameName === '王者荣耀' ? 1 : 2
          url = `${domain}web/quGame/trade/accountDetail?dataId=${this.dataId}&gameType=${type}`
          const aux = document.createElement('textarea')
          aux.innerHTML = url
          document.body.appendChild(aux)
          aux.select()
          document.execCommand('copy')
          document.body.removeChild(aux)
          this.$message.success('复制成功')
        },
        updateList () {
          this.$refs.balckItem.getList()
          this.getDetail()
        },
        // 添加备注
        addSub(content) {
            this.subFlag = true
            this.subContent = ''
            if (content && content.remarkId) {
                this.subRemarkId = content.remarkId
                this.subTitle = '编辑备注'
                this.subContent = content.remark
            }
        },
        // 展开全部
        showAll () {
            this.allFlag = !this.allFlag
        },
        // 确定添加或编辑备注
        subConfirm () {
            let params = {
                beRemarkUserId: this.dataId,
                remark: this.subContent,
                remarkType: 2,
                businessUserId: this.detail.userId
            }
            let url = `/user/addRemark`
            if (this.subRemarkId) {
                url = `/user/editRemark`
                params.remarkId = this.subRemarkId || 0
            }
            this.$http.post(url, params).then(res => {

                if (res.code === '0') {
                    this.subFlag = false
                    this.getDetail()
                    this.$message({
                        type: 'success',
                        message: this.subRemarkId ? '编辑成功' : '添加成功'
                    })
                    this.subRemarkId = null
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        // 删除备注
        delSub (item) {
            console.log('删除备注')
            this.$http.post(`/user/delRemark`, {
                remarkId: item.remarkId
            }).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getDetail()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        goUserInfo (id) {
            const { href } = this.$router.resolve({
                path: '/dataReport/userInfo',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },
        showDescAccount() {
          this.descAccount = true
          this.descAccountContent = this.detail.title
        },
        descAccountAction() {
          let params = {
              dataId: this.dataId,
              title: this.descAccountContent
          }
          this.$http.post(`/deal/updateAccountTitle`, params).then(res => {
              if (res.code === '0') {
                  this.$message({
                      type: 'success',
                      message: '修改成功'
                  })
                  this.descAccount = false
                  this.descAccountContent = ''
                  this.getDetail()
              } else {
                  this.$message({
                      type: 'error',
                      message: res.desc
                  })
              }
          })
        },
        showPriceModal(index) {
          this.priceContent = ''
          this.priceIndex = index + 1
          this.priceTitle = index ? '减免保证金' : '修改售价'
          this.priceLabel = index ? '保证金（元）：' : '修改价格（元）：'
          this.editPrice = true
        },
        // 改价
        confirmPrice() {
          // 如果是修改价格则提示 不能大于售价 或 低于底价
          if (this.priceIndex === 1) {
            if (Number(this.priceContent) > Number(this.detail.price) || Number(this.priceContent) < Number(this.detail.basePrice)) {
              return this.$message({
                  type: 'error',
                  message: '订单金额不能高于售价和低于后台底价'
              })
            }
          } else {
            if (!Number(this.priceContent)) {
              return this.$message({
                  type: 'error',
                  message: '请输入大于0的保证金'
              })
            }
          }
          let params = {
              dataId: this.dataId,
              price: this.priceContent,
              type: this.priceIndex
          }
          this.$http.post(`/deal/updateAccountPrice`, params).then(res => {
              if (res.code === '0') {
                  this.$message({
                      type: 'success',
                      message: '修改成功'
                  })
                  this.editPrice = false
                  this.priceContent = ''
                  this.getDetail()
              } else {
                  this.$message({
                      type: 'error',
                      message: res.desc
                  })
              }
          })
        },
        getDetail () {
            this.$http.get('/deal/dealAccountDetail', {
              params: {
                dataId: this.dataId,
                status: this.status,
                type: this.type
              }
            }).then(res => {
                if (res.code === '0') {
                    this.detail = res.data
                    this.insure = res.data.insure
                    this.gameAccountVo = res.data.gameAccountVo
                    this.userIdCardVo = res.data.userIdCardVo
                    this.userRemarks = res.data.userRemarkVos || []
                    this.userAdviseInfoVo = res.data.userAdviseInfoVo || null
                    if (this.detail.gameName === '王者荣耀') {
                      this.iframUrl = `${domain}web/quGame/trade/accountDetail?dataId=${this.dataId}&from=admin&t=${encodeURIComponent(token)}&gameType=1`
                    } else {
                      this.iframUrl = `${domain}web/quGame/trade/accountDetail?dataId=${this.dataId}&from=admin&t=${encodeURIComponent(token)}&gameType=2`
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                }
            })
        },
        setAuditStatus (status) {
            let data = {
              dataId: this.dataId,
              operateStatus: status
            }
            if (this.remark) {
              data.remark = this.remark
            }
            let url = '/deal/operateDealStatus' // 注销
            if (status === 2) {
              url = '/peace/operatePropAuditStatus' // 审核
            }
            this.$http.post(url, data).then(res => {
              if (res.code === '0') {
                this.dialogVisible = false
                this.remark = ''
                this.$set(this.detail, 'status', status)
              } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
              }
            })
        },
        goOrderDetail (item) {
            if (item) {
              if (!item.jumpType) {
                  this.$message({
                      type: 'error',
                      message: '跳转失败'
                  })
              } else if (item.jumpType === 1) {
                  const { href } = this.$router.resolve({ path: '/seller/accTradingDetail', query: { dataId: item.businessId, status, type: 0 } })
                  window.open(href, '_blank')
              } else if (item.jumpType === 2) {
                  const { href } = this.$router.resolve({ path: '/seller/tradOrderDetail', query: { orderId: item.businessId } })
                  window.open(href, '_blank')
              }
            } else {
              this.$router.push({ path: '/seller/tradOrderDetail', query: { orderId: this.detail.orderId } })
            }
        },
        refused (status) {
          this.auditStatus = status
          this.dialogVisible = true
        },
        formatDate (time, type) {
          return formatDate(time, type || 'YYYY-MM-DD HH:MM:SS')
        }
    }
}
</script>
<style lang="scss" scoped>
  .card-line {
    border-top: solid 1px #ededed;
    margin-top: 10px;
    padding-top: 10px;
    .account-desc {
      display: flex;
      justify-content: flex-start;
      .desc-title {
        min-width: 70px;
        margin-right: 10px;
      }
      .desc-content {
        margin-right: 10px;
      }
    }
  }
  .sub-top-title {
    display: flex;
    justify-content: space-between;
  }
  .sub-wrap {
    border: solid 1px #ededed;
    border-radius: 5px;
    margin-bottom: 20px;
    margin-top: 20px;
    overflow: hidden;
    .sub-title {
        padding: 10px;
        font-size: 16px;
        font-weight: 500;
        color: #363636;
        position: relative;
    }
    .sub-botton {
        padding: 5px 0px 10px;
        text-align: center;
        border-top: solid 1px #ededed;
        position: relative;
        background-color: #ffffff;
    }
    .sub-list {
        // border-top: solid 1px #ededed;
        padding: 10px;
        height: 200px;
        .sub-row {
            margin-bottom: 10px;
            .top {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-bottom: 5px;
                .name {
                    font-size: 14px;
                    font-weight: 500;
                    color: #363636;
                    margin-right: 10px;
                }
                .time {
                    font-size: 12px;
                    font-weight: 500;
                    color: #9ba0b1;
                    margin-right: 10px;
                }
                i {
                    cursor: pointer;
                }
            }
            .bottom {
                font-size: 14px;
                color: #363636;
                word-wrap: break-word;
            }
        }
    }
}
  .price-msg {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .content{
    margin: 20px 0;
  }
  .card {
    margin-bottom: 20px;
    .card-content {
      border: 1px solid #EBEEF5;
      display: flex;
      justify-content: flex-start;
      color: #837d7d;
      font-size: 14px;
      line-height: 22px;
      padding: 10px 20px;
      border-radius: 5px;
      flex-wrap: wrap;
      .item {
        margin-right: 50px;
      }
    }
    .card-content-active {
      display: block;
      border-top: 1px solid #EBEEF5;
    }
  }

  .qu-game {
    width: 100%;
  }
  .operation{
    display: flex;
    justify-content: flex-start;
    float: right;
  }
  .table-btn {
      cursor: pointer;
      color: #409EFF;
      font-size: 13px;
      font-weight: 500;
      &:hover {
          text-decoration: underline;
      }
  }
</style>
